//
//  MeFirstPage.swift
//  Motion
//
//  Created by 悦月越悦 on 2021/3/3.
//

import SwiftUI

struct UserPage: View {
    var body: some View {
        ZStack(alignment:.top){
            UserTopBar()
            ZStack(alignment: .top){
               
                VStack(){
                    NavBoard()
                        .padding(.bottom,20)
                    FuncCells()
                        
                    Spacer()
                    ServiceMessage()
                        .padding(.bottom,40)
                }
                .padding(EdgeInsets(top: 110, leading: 16, bottom: 0, trailing: 16))
                .background(Color("bgGray"))
                .cornerRadius(15, corners: [.topLeft, .topRight])
                .padding(.top,54)
                
                NameAndAvatar()
                    .padding(EdgeInsets(top: 20, leading: 16, bottom: 0, trailing: 16))
                
            }
        }
        .ignoresSafeArea(.all)
    }
}



//在指定的方向添加圆角
//出处: https://stackoverflow.com/questions/56760335/round-specific-corners-swiftui
extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}

struct RoundedCorner: Shape {

    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}


struct MeFirstPage_Previews: PreviewProvider {
    static var previews: some View {
        UserPage()
    }
}

//拓展图片
extension Image {
    func rectImage(_ width:CGFloat,_ height: CGFloat) -> some View {
        self
            .resizable()
            .scaledToFit()
            .frame(width:width,height:height)
    }
    func squareImage(size:CGFloat) -> some View {
        self
            .resizable()
            .scaledToFit()
            .frame(width:size,height:size)
   }
    
}
